import React, { useState, useEffect } from 'react'
import { Editor, Toolbar, } from '@wangeditor/editor-for-react'
// import { DomEditor} from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

function MyEditor(props) {
    const { id, value = {}, onChange } = props;
    // editor 实例
    const [editor, setEditor] = useState(null)             
    // 编辑器内容
    const [html, setHtml] = useState()
    const triggerChange = (changedValue) => {
        onChange?.({
          html,
          ...value,
          ...changedValue,
        });
      };
    // 模拟 ajax 请求，异步设置 html
    useEffect(() => {
       
    }, [])
    // 工具栏配置
    const toolbarConfig = {
      toolbarKeys: [
        // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。
        // 不配置，默认全显示
        'headerSelect', // 标题
        '|', // 分隔线
        'bold', // 粗体
        'underline', // 下划线
        'italic', // 斜线
        'color', // 文字颜色
        'bgColor', // 背景色
        'fontSize', // 字号
        'fontFamily', // 字体
        'lineHeight', // 行高
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'todo', // 待办事项
        '|', //
        'emotion', // 表情
        'uploadImage', // 插入图片
        'insertLink', // 插入链接
        'insertTable', // 插入表格
        'codeBlock', // 代码块
        'divider', // 分割线
        '|', // 分隔线
        'undo', // 撤销
        'redo', // 重做
        'fullScreen', // 全屏
      ]
     }                       
    
    // 编辑器配置
    const editorConfig = {                        
        placeholder: '请输入内容...',
        MENU_CONF:{}
    }
   
    // 自定义上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
        base64LimitSize: 5 * 1024, // 5kb
        customUpload(file, insertFn) {
             // JS 语法
            // file 即选中的文件 <input type='file'/>
            //表单上传文件时 multipart/form-data
            let formData = new FormData()
            formData.append('file', file) //file 后台接受变量字段 file
            console.log(formData)
            //网络请求---------------------------
            // console.log('this-----',that);
            // let res = await that.$api.batchUpload(formData)
            // console.log(res.data)
            // let { url, alt, href } = res.data
            // 自己实现上传，并得到图片 url alt href

            insertFn('https://www.w3schools.com/tags/img_pulpit.jpg')
        },
    }
    // 及时销毁 editor ，重要！
    useEffect(() => {
        //加return 销毁的时候 触发
        return () => {
            if (editor == null) return
            // console.log('22')
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    const changeEdiotr = (editor)=>{
        if (!('html' in value)) {
            setHtml(editor.getHtml())
        }
        triggerChange({
            html: editor.getHtml(),
        })
    }
    return (
        <>
            <div style={{ border: '1px solid #ccc', zIndex: 100}} id={id}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={value.html||html}
                    onCreated={setEditor}
                    onChange={(editor)=>{changeEdiotr(editor)}}
                    mode="default"
                    style={{ height: '300px', overflowY: 'hidden' }}
                />
            </div>
            {/* <div>{html}</div> */}
        </>
    )
}

export default MyEditor